import * as echarts from "echarts";
import { useEffect } from "react";
export default function Progress() {
  useEffect(() => {
    var chartDom = document.getElementById("progress");
    // 获取实例
    var myChart = echarts.getInstanceByDom(chartDom);
    if (!myChart) {
      // 如果不存在则创建{myChart = echarts.init(chartDom)
      myChart = echarts.init(chartDom);
    }

    var data = [70, 34, 60, 78, 69];
    var titlename = [
      "黄石街道",
      "景泰街道",
      "永平街道",
      "大源街道",
      "白云湖街",
    ];
    var valdata = [];
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    let option = {
      //图标位置
      grid: {
        top: "10%",
        left: "22%",
        bottom: "10%",
      },
      xAxis: {
        show: false,
      },
      yAxis: [
        {
          show: true,
          data: titlename,
          inverse: true,
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            fontSize: "16",

            rich: {
              lg: {
                backgroundColor: "#339911",
                color: "#fff",
                borderRadius: 15,
                align: "center",
                width: 15,
                height: 15,
              },
            },
          },
        },
        {
          show: false,
          inverse: true,
          data: valdata,
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: "#fff",
            },
          },
        },
      ],
      series: [
        {
          name: "条",
          type: "bar",
          yAxisIndex: 0,
          data: data,
          barCategoryGap: 50,
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 20,
              color: function (params) {
                var num = myColor.length;
                return myColor[params.dataIndex % num];
              },
            },
          },
          label: {
            normal: {
              show: true,
              position: "inside",
              formatter: "{c}%",
            },
          },
        },
        {
          name: "框",
          type: "bar",
          yAxisIndex: 1,
          barCategoryGap: 50,
          data: [100, 100, 100, 100, 100],
          barWidth: 15,
          itemStyle: {
            normal: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 3,
              barBorderRadius: 15,
            },
          },
        },
      ],
    };

    // 把配置给实例对象
    myChart.setOption(option);
  });

  return (
    <div className="panel-left-box panel-leftborder">
      <div className="panel-left">
        <h2>整改率</h2>
        <div id="progress" style={{ width: "100%", height: "100%" }}></div>
      </div>
    </div>
  );
}
